<template>
  <div class="contrast">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{path:'/member/list'}">会员服务</el-breadcrumb-item>
      <el-breadcrumb-item >产品对比</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="main">
      <el-table
        :data="tableData"
        border
        :span-method="arraySpanMethod"
        style="width: 100%; margin-top: 15px"
        :cell-style="cellStyle"
        :header-cell-style="headerCellStyle"
      >
        <!-- 产品列 -->
        <el-table-column
          label="产品"
          prop="product"
          width="150"
        />
        
        <!-- 服务项目列 -->
        <el-table-column
          label="服务项目"
          prop="serviceItem"
          width="200"
        />
        
        <!-- 二级服务项列 -->
        <el-table-column
          label="二级服务项"
          prop="subServiceItem"
          width="200"
        />
        
        <!-- VIP1列 -->
        <el-table-column
          label="VIP1"
          align="center"
          min-width="180"
        >
          <template #header>
            <div class="vip-header">
              <div>VIP1</div>
              <div class="price">4999元/年</div>
              <el-button type="primary" size="mini" @click="goDetail(0)">立即购买</el-button>
            </div>
          </template>
          <template #default="scope">
            <span :class="getIconClass(scope.row.vip1)">{{ formatValue(scope.row.vip1) }}</span>
          </template>
        </el-table-column>
        
        <!-- VIP2列 -->
        <el-table-column
          label="VIP2"
          align="center"
          min-width="180"
        >
          <template #header>
            <div class="vip-header">
              <div>VIP2</div>
              <div class="price">5999元/年</div>
              <el-button type="primary" size="mini" @click="goDetail(1)">立即购买</el-button>
            </div>
          </template>
          <template #default="scope">
            <span :class="getIconClass(scope.row.vip2)">{{ formatValue(scope.row.vip2) }}</span>
          </template>
        </el-table-column>
        
        <!-- VIP3列 -->
        <el-table-column
          label="VIP3"
          align="center"
          min-width="180"
        >
          <template #header>
            <div class="vip-header">
              <div>VIP3</div>
              <div class="price">6999元/年</div>
              <el-button type="primary" size="mini" @click="goDetail(2)">立即购买</el-button>
            </div>
          </template>
          <template #default="scope">
            <span :class="getIconClass(scope.row.vip3)">{{ formatValue(scope.row.vip3) }}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="footer">
      CopyRight @双碳采购网 2020-2023
    </div>
  </div>
</template>

<script>

export default {
  name: "contrast",
  data() {
    return {
      tableData: [
        {
          product: '信息服务',
          serviceItem: '信息推送服务',
          subServiceItem: '通讯订阅',
          vip1: 'x',
          vip2: 'x',
          vip3: 'x',
          productSpan: 3, // 合并3行
          serviceItemSpan: 3 // 合并3行
        },
        {
          product: '',
          serviceItem: '',
          subServiceItem: '标讯短信推送',
          vip1: '100条/月',
          vip2: '100条/月',
          vip3: '100条/月',
          productSpan: 0,
          serviceItemSpan: 0
        },
        {
          product: '',
          serviceItem: '',
          subServiceItem: '邮件推送',
          vip1: 'x',
          vip2: '√',
          vip3: '√',
          productSpan: 0,
          serviceItemSpan: 0
        },
        {
          product: '客服服务',
          serviceItem: '专属服务',
          subServiceItem: '专属人工服务',
          vip1: '√',
          vip2: '√',
          vip3: '√',
          productSpan: 2, // 合并2行
          serviceItemSpan: 2 // 合并2行
        },
        {
          product: '',
          serviceItem: '',
          subServiceItem: '电脑远程桌面服务',
          vip1: '12次/年',
          vip2: '12次/年',
          vip3: '24次/年',
          productSpan: 0,
          serviceItemSpan: 0
        },
        {
          product: '增值服务',
          serviceItem: '数字证书服务',
          subServiceItem: 'CA证书办理',
          vip1: '赠送1个',
          vip2: '赠送1个',
          vip3: '赠送2个',
          productSpan: 3, // 合并3行
          serviceItemSpan: 0
        },
        {
          product: '',
          serviceItem: '商业信用服务',
          subServiceItem: '信用信息报告',
          vip1: '√ (首份免费)',
          vip2: '√ (首份免费)',
          vip3: '√ (3份免费)',
          productSpan: 0,
          serviceItemSpan: 2 // 合并2行
        },
        {
          product: '',
          serviceItem: '',
          subServiceItem: '咨询评估报告',
          vip1: 'x',
          vip2: 'x',
          vip3: '√',
          productSpan: 0,
          serviceItemSpan: 0
        }
      ]
    }
  },
  async created() {
    
  },
  mounted() {
   
  },
  methods: {
    goDetail(id){
      this.$router.push('/member/detail?id='+id)
    },// 购买页
    // 处理单元格合并
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) { // 产品列
        if (row.productSpan > 0) {
          return [row.productSpan, 1]
        } else {
          return [0, 0]
        }
      }
      if (columnIndex === 1) { // 服务项目列
        if (row.serviceItemSpan > 0) {
          return [row.serviceItemSpan, 1]
        } else {
          return [0, 0]
        }
      }
    },
    // 格式化显示值
    formatValue(value) {
      if (value === '√') return '✓'
      if (value === 'x') return '✗'
      return value
    },
    // 设置图标样式
    getIconClass(value) {
      if (value === '√') return 'icon-yes'
      if (value === 'x') return 'icon-no'
      return ''
    },
    // 单元格样式
    cellStyle({ row, column, rowIndex, columnIndex }) {
      return {
        'text-align': 'center',
        'vertical-align': 'middle'
      }
    },
    // 表头样式
    headerCellStyle({ row, column, rowIndex, columnIndex }) {
      return {
        'background-color': '#f5f7fa',
        'font-weight': 'bold',
        'text-align': 'center',
        'vertical-align': 'middle'
      }
    }
  },
}
</script>

<style lang="scss" scoped>

</style>
